<template>
	<view class="area-box">
		<!-- <view class="pop-close">
			<img @click="close"
				src="https://file.casugn.com/storecompcard//LFV8AKwdezzK28960a4e24ed28992012ca1560122c19_1660814072013.png"
				alt="">
		</view> -->
		<view class="area-wrap" v-for="(item,index) in areaList" :key="index">
			<view class="area-name">
				{{item.areaName}}
			</view>
			<view class="city-name-box">
				<view :class="obj.isSelect==true?'city-name-active':'city-name'" v-for="(obj,i) in item.cityLists"
					@click="cityNameClick(obj,i,index)" :key="i">
					{{obj.name}}
				</view>
			</view>

		</view>
		<view class="area-save">
			<u-button type="primary" :disabled="saveDisable" color="#2684ff" text="保存" @click="save">
			</u-button>
		</view>
	</view>
</template>

<script>
	export default {
		name: "supplyAllArea",
		data() {
			return {
				areaList: [{
						areaName: "全国地区",
						cityLists: [{
							isSelect: false,
							name: '全国',
						}, ]
					},
					{
						areaName: "华北地区",
						cityLists: [{
								isSelect: false,
								name: '全部',
							},
							{
								isSelect: false,
								name: '北京'
							},
							{
								isSelect: false,
								name: '河北'
							},
							{
								isSelect: false,
								name: '内蒙古'
							},
							{
								isSelect: false,
								name: '山西'
							},
							{
								isSelect: false,
								name: '天津'
							},
						]
					},
					{
						areaName: "华南地区",
						cityLists: [{
								isSelect: false,
								name: '全部'
							},
							{
								isSelect: false,
								name: '广东'
							},
							{
								isSelect: false,
								name: '广西'
							},
							{
								isSelect: false,
								name: '海南'
							},
						]
					},
					{
						areaName: "华东地区",
						cityLists: [{
								isSelect: false,
								name: '全部'
							},
							{
								isSelect: false,
								name: '安徽'
							},
							{
								isSelect: false,
								name: '福建'
							},
							{
								isSelect: false,
								name: '江苏'
							},
							{
								isSelect: false,
								name: '山东'
							},
							{
								isSelect: false,
								name: '上海'
							},
							{
								isSelect: false,
								name: '浙江'
							},
						]
					},
					{
						areaName: "华中地区",
						cityLists: [{
								isSelect: false,
								name: '全部'
							},
							{
								isSelect: false,
								name: '河南'
							},
							{
								isSelect: false,
								name: '湖北'
							},
							{
								isSelect: false,
								name: '湖南'
							},
							{
								isSelect: false,
								name: '江西'
							},
						]
					},
					{
						areaName: "西北地区",
						cityLists: [{
								isSelect: false,
								name: '全部'
							},
							{
								isSelect: false,
								name: '甘肃'
							},
							{
								isSelect: false,
								name: '宁夏'
							},
							{
								isSelect: false,
								name: '青海'
							},
							{
								isSelect: false,
								name: '山西'
							},
							{
								isSelect: false,
								name: '新疆'
							},
						]
					},
					{
						areaName: "西南地区",
						cityLists: [{
								isSelect: false,
								name: '全部'
							},
							{
								isSelect: false,
								name: '贵州'
							},
							{
								isSelect: false,
								name: '四川'
							},
							{
								isSelect: false,
								name: '西藏'
							},
							{
								isSelect: false,
								name: '云南'
							},
							{
								isSelect: false,
								name: '重庆'
							},
						]
					},
					{
						areaName: "东北地区",
						cityLists: [{
								isSelect: false,
								name: '全部'
							},
							{
								isSelect: false,
								name: '黑龙江'
							},
							{
								isSelect: false,
								name: '吉林'
							},
							{
								isSelect: false,
								name: '辽宁'
							},
						]
					},
					{
						areaName: "港澳台地区",
						cityLists: [{
								isSelect: false,
								name: '全部'
							},
							{
								isSelect: false,
								name: '香港'
							},
							{
								isSelect: false,
								name: '澳门'
							},
							{
								isSelect: false,
								name: '台湾'
							},
						]
					}
				],
				isActive: false,
				activeNum: "-1",
				selectOnce: false,
				checkbox: [], //选中的关键字
				isCheckAll: false,
				selectK: '-1',
				arr: [],
				saveDisable: true
			};
		},
		methods: {
			cityNameClick(item, index, k) {
				if (this.selectK == k) {
					this.selectOnce = !this.selectOnce
				} else {
					this.areaList[k].cityLists.forEach(obj => {
						console.log(obj)
						if (obj.isSelect == false) {
							this.selectOnce = true
						} else {
							this.selectOnce = false
						}
					})

				}
				this.activeNum = index
				this.areaList.forEach(ele => {
					let a = ele.cityLists.find(obj => {
						return obj.name == item.name
					})
					if (a) {
						if (a.name == "全部") {
							this.areaList[0].cityLists[0].isSelect = false
							if (this.selectOnce) {
								this.areaList[k].cityLists.map(obj => {
									obj.isSelect = true
								})

							} else {
								this.areaList[k].cityLists.map(obj => {
									obj.isSelect = false
								})
								// this.arr=[...new Set(this.arr)]
								// console.log(this.arr)
								// this.areaList[k].cityLists.forEach(ii=>{
								// 	if(ii.isSelect==false){
								// 		this.arr.splice(this.arr.indexOf(ii.name),1)
								// 	}

								// })
								// console.log("测试测试")
								// console.log(this.arr)
							}


						} else if (a.name == "全国") {
							if (this.selectOnce) {
								// console.log(ele)
								this.areaList.forEach(j => {
									j.cityLists.map(o => {
										o.isSelect = false
									})
								})
								this.areaList[k].cityLists.map(obj => {
									obj.isSelect = true
								})

								this.arr = []
								this.arr.push('全国')

							} else {
								this.areaList[k].cityLists.map(obj => {
									obj.isSelect = false
								})
							}
						} else {
							if (a.name == item.name) {
								console.log("就是这里")
								console.log(a.name)

								this.areaList[0].cityLists[0].isSelect = false
								this.selectOnc = false
								a.isSelect = !a.isSelect
								this.areaList[k].cityLists.forEach(obj => {
									if (obj.isSelect == false) {
										// this.arr.splice(a.name, 1)
										this.areaList[k].cityLists.map(obj => {
											// this.arr=[...new Set(this.arr)]

											if (obj.name == "全部") {
												// console.log(obj)
												obj.isSelect = false
												this.selectOnce = false
											}
										})
									} else {
										// this.arr.push(obj.name)

										// console.log(this.arr)
									}
								})
							}
						}
					}

				})

				this.selectK = k



				this.arr = []
				this.areaList.forEach(item => {
					item.cityLists.forEach(obj => {
						if (obj.isSelect == true && obj.name != "全部") {
							this.arr.push(obj.name)
						}
					})
				})
				console.log(this.arr)
				if (this.arr.length == 0) {
					this.saveDisable = true
				} else {
					this.saveDisable = false
				}

			},

			save() {

				this.$emit("areaSelectName", this.arr)
				// console.log(a.isSelect)
			},
			close() {

			},
		}
	}
</script>

<style lang="scss" scoped>
	.area-box {
		position: relative;
		padding-bottom: calc(150rpx + env(safe-area-inset-bottom));

		.area-save {
			position: fixed;
			text-align: center;
			width: 100%;
			height: 151rpx;
			margin-top: 15rpx;
			background: white;
			border-top: 1px solid #f4f4f4;
			padding: 20rpx 48rpx 10rpx;
			box-sizing: border-box;
			bottom: 0;
	}

	.pop-close {
		text-align: right;

		img {
			margin-right: 40upx;
			width: 80upx;
			height: 80upx;
		}

	}

	.area-wrap {
		display: flex;
		border-bottom: 1px solid #f4f4f4;
		padding: 40upx 20upx;

		// justify-content: spa;
		.area-name {
			// margin-right: 40upx;
			width: 170upx;
			text-align: center;
		}

		.city-name-box {
			margin-left: 40upx;
			display: flex;
			width: 500upx;
			// background: red;
			flex-wrap: wrap;

			.city-name {
				width: 100upx;
				padding: 15upx;
				background: #f5f5f5;
				border-radius: 5upx;
				margin: 10upx;
				text-align: center;
			}

			.city-name-active {
				width: 100upx;
				padding: 15upx;
				background: #2979ff;
				border-radius: 5upx;
				margin: 10upx;
				text-align: center;
				color: white;
				// background: red;
			}
		}
	}
	}
</style>